<script setup lang="ts">
import {onMounted, ref} from 'vue'
import type {Page} from "@/interface/base.ts";
import {useAddAreaApi, useEditAreaApi, usePageAreaApi} from "@/services/api";
import type {AddAreaReqVO, EditAreaReqVO, PageAreaReqVO, PageAreaRespVO} from "@/interface/area.ts";

const show = ref<boolean>(false)
const title = ref<string>('')

const addArea = ref<AddAreaReqVO>({
  label: '',
  deskCount: 1,
})
const editArea = ref<EditAreaReqVO>({
  id: 0,
  label: '',
  deskCount: 0,
  status: 0,
})

const tableData = ref<Page<PageAreaRespVO>>({
  list: [],
  total: 0
})
const pageAreaReq = ref<PageAreaReqVO>({
  size: 10,
  current: 1,
})
const onConfirm = async () => {
  try {
    if (title.value === '添加') {
      await useAddAreaApi(addArea.value)
    } else {
      await useEditAreaApi(editArea.value)
    }
  } finally {
    show.value = false
    await loadData()
  }
}
const onSubmit = () => {
  loadData()
}
const onAdd = () => {
  addArea.value = {
    label: '',
    deskCount: 0,
    status: 0,
  }
  title.value = '添加'
  show.value = true
}
const onEdit = (row: EditAreaReqVO) => {
  editArea.value = row
  title.value = '编辑'
  show.value = true
}
const loadData = async () => {
  const {data: res} = await usePageAreaApi(pageAreaReq.value);
  if (!res || !res.target) {
    tableData.value.list = res.list
    tableData.value.total = res.total
  }
}
const handleSizeChange = () => {
  pageAreaReq.value.current = 1
  loadData()
}
const handleCurrentChange = (val: number) => {
  pageAreaReq.value.current = val
  loadData()
}
onMounted(() => {
  loadData()
})
</script>

<template>
  <div class="container">
    <div class="search">
      <el-form :inline="true" :model="pageAreaReq" class="demo-form-inline">
        <el-form-item label="区域名">
          <el-input v-model="pageAreaReq.label" placeholder="输入区域名" clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="action">
      <el-button type="primary" @click="onAdd">添加</el-button>
    </div>
    <div class="table">
      <el-table :data="tableData.list" border style="width: 100%">
        <el-table-column prop="id" label="编号" width="200"/>
        <el-table-column prop="label" label="区域名" width="180"/>
        <el-table-column prop="deskCount" label="桌数" width="100"/>
        <el-table-column prop="static" label="状态" width="100">
          <template #default="scope">
            <el-tag
                :type="scope.row.status == 1 ? 'success' : 'danger'"
            >
              {{ scope.row.status == 1 ? "启用" : "禁用" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" width="90">
          <template #default="scope">
            <el-button type="primary" size="small" @click="onEdit(scope.row)">
              修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="demo-pagination-block">
      <el-pagination
          v-model:current-page="pageAreaReq.current"
          v-model:page-size="pageAreaReq.size"
          :page-sizes="[10, 20, 30, 40]"
          :small="false"
          :disabled="false"
          :background="true"
          layout="prev, pager, next, jumper"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog
        v-model="show"
        :title="title"
        width="30%"
    >
      <el-form v-if="title == '添加'" :label-width="100" :inline="true" :model="addArea">
        <el-form-item label="区域名">
          <el-input v-model="addArea.label" placeholder="输入区域名" clearable/>
        </el-form-item>
        <el-form-item label="桌数">
          <el-input-number v-model="addArea.deskCount" :min="1" :max="20"/>
        </el-form-item>
      </el-form>
      <el-form v-else :label-width="100" :inline="true" :model="editArea">
        <el-form-item label="区域名">
          <el-input v-model="editArea.label" placeholder="输入区域名" clearable/>
        </el-form-item>
        <el-form-item label="桌数">
          <el-input-number v-model="editArea.deskCount" :min="1" :max="20"/>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
              v-model="editArea.status"
              placeholder="选择状态"
          >
            <el-option label="启用" :value="1"/>
            <el-option label="禁用" :value="0"/>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="show = false">取消</el-button>
        <el-button type="primary" @click="onConfirm">
          确认
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.container {
  flex: 1;
  padding: 24px;

  .action {
    margin-bottom: 10px;
  }

  .demo-pagination-block {
    margin-top: 20px;
  }
}
</style>